<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { shortorderreplaceList } from '@/api/dict/detail'
  import { updateRemarkLogApi } from '@/api/order/sOrder'
  const newlist = ref([])
  const initFold = ref(false)
  const initExpand = ref(true)
  const getDetail = async (id: any) => {
    const res = await shortorderreplaceList({ id: props.orderId })
    // var list = res.result.orderCarInfoList
    // if (list && list.length) {
    //   list.forEach((el, i) => {
    //     if (list[i] && list[i + 1]) {
    //       newlist.value.push([list[i], list[i + 1]])
    //     }
    //   })
    // }
    newlist.value = res.result.replaceCarInfoList
  }
  const onview = (record: any, status: Number) => {
    uni.navigateTo({
      url: `/pages/order/short-order/detail/upinfo?status=${status}&amount=${JSON.stringify(record)}`,
    })
  }
  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })
  // 换车记录弹框
  const remarkVisible = ref(false)
  // 换车备注
  const form = ref({})
  const showRemarkModel = (val) => {
    form.value = JSON.parse(JSON.stringify(val))
    remarkVisible.value = true
  }
  // 提交修改换车备注
  const onConfirm = () => {
    let params = {
      id: props.orderId, // 换车记录id
      replaceReturnId: form.value.replaceReturnId, // 换上记录id
      replaceGiveId: form.value.replaceGiveId, // 换下记录id
      replaceRemark: form.value.replaceRemark, // 换车备注,
    }
    updateRemarkLogApi(params).then((res) => {
      if (res.code == 200) {
        getDetail()
        uni.showToast({
          icon: 'none',
          title: '修改换车备注成功',
        })
        remarkVisible.value = false
      }
    })
  }
  onLoad((options: any) => {
    if (props.orderId) {
      getDetail()
    }
  })
</script>

<template>
  <view class="detail-container">
    <ve-card
      :title="'换车记录' + (index + 1)"
      v-for="(item, index) in newlist"
      :key="index"
      type="none"
      fold
      :defaultFold="index == 0 ? true : false"
    >
      <ve-cell label="换车人">{{ item.replaceStaffName || '-' }}</ve-cell>
      <ve-cell label="换车人联系电话">{{ item.replaceStaffPhone || '-' }}</ve-cell>
      <ve-cell label="换车时间">{{ item.replaceTime || '-' }}</ve-cell>
      <ve-cell label="备注">
        <view>
          <text>{{ item.replaceRemark || '-' }}</text>
          <text class="remark-btn" @click="showRemarkModel(item)">修改备注</text>
        </view>
      </ve-cell>
      <view class="ve-card-header-border-line-content"></view>
      <ve-cell label="换下车牌">
        <view style="flex: 1">
          {{ item.replaceReturnLicenseNo || '-' }}
          <ve-tag color="red" :title="item.replaceReturnLabel" v-if="item.replaceReturnLabel" />
        </view>
        <text class="view" @click="onview(item, 1)">查看详情</text>
      </ve-cell>
      <ve-cell label="换下车型">{{ item.replaceReturnModelName || '-' }}</ve-cell>
      <view class="ve-card-header-border-line-content"></view>
      <ve-cell label="换上车牌">
        <view style="flex: 1">
          {{ item.replaceGiveLicenseNo || '-' }} <ve-tag color="red" :title="item.replaceGiveLabel" v-if="item.replaceGiveLabel" />
        </view>
        <text class="view" @click="onview(item, 2)">查看详情</text>
      </ve-cell>
      <ve-cell label="换上车型">{{ item.replaceGiveModelName || '-' }}</ve-cell>
    </ve-card>
    <ve-empty v-if="!newlist || newlist.length == 0"></ve-empty>
  </view>
  <!-- 修改备注弹框 -->
  <ve-modal title="修改备注" v-model="remarkVisible">
    <ve-form>
      <ve-form-item label="换车备注" :borderBottom="false">
        <ve-input v-model="form.replaceRemark" placeholder="请输入换车备注" :maxlength="200" />
      </ve-form-item>
    </ve-form>
    <template #footer>
      <ve-button type="link" size="long" class="cancel-text" @click="remarkVisible = false">关闭</ve-button>
      <view class="divider"></view>
      <ve-button type="link" size="long" class="btn-text" @click="onConfirm">确认</ve-button>
    </template>
  </ve-modal>
</template>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
  .upinfo {
    padding: 24rpx;
  }
  .ve-card-header-border-line-content {
    width: 100%;
    height: 2rpx;
    background-color: rgba(216, 216, 216, 0.3);
  }
  .view {
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
    height: 44rpx;
    padding: 0 16rpx;
    position: absolute;
    right: 24rpx;
  }
  .remark-btn {
    color: #1890ff;
    cursor: pointer;
    margin: 0 20rpx;
  }
  .btn-text {
    font-size: 27rpx;
    color: #3072f6;
  }
  .divider {
    width: 2rpx;
    height: 100%;
    background: #e5e6eb;
  }
  .cancel-text {
    font-size: 27rpx;
    color: #191c27;
  }
</style>
